<template>
  <view class="lottery-history-container">
    <!-- 遮罩层 -->
    <view class="popup" @click="onClickOperate($event, 'close', {})"> </view>

    <view class="box-module">
      <!-- 头部 -->
      <view class="top">
        <view class="title">开奖记录 </view>
        <img
          class="close-icon"
          src="../img/back-1.png"
          alt=""
          @click="onClickOperate($event, 'close', {})"
        />
      </view>

      <!-- 选项卡 -->
      <view class="tabs">
        <view
          class="tab-item"
          :class="[active == index ? 'active' : '', item.class]"
          v-for="(item, index) in tabList"
          :key="index"
          @click="onClickOperate($event, 'changeActive', { item, index })"
        >
          {{ item.label }}
        </view>
      </view>

      <!-- 箱子列表 -->
      <scroll-view
        class="content"
        scroll-y
        :scroll-with-animation="true"
        :scroll-left="scrollLeft"
        @scroll="onScroll"
        @scrolltolower="onreachBottom"
        v-if="list.length > 0"
      >
        <lottery-records-item
          v-for="(item, index) in list"
          :key="index"
          :details="item"
          :active="tabList[active].id"
        ></lottery-records-item>
      </scroll-view>
      <u-empty
        v-if="!loading && list.length == 0"
        text="暂无开奖记录哦~"
        mode="list"
        icon-size="278"
        height="50%"
        :src="
          $IMG_URL + '/uploads/20230527/55453739a329de5eb480838ef5ad58c5.png'
        "
      ></u-empty>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
import LotteryRecordsItem from './lottery-records-item.vue';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { LotteryRecordsItem },
  props: {
    initiallyId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      active: 0,
      // 当前 滚动条 位置
      scrollLeft: 0,
      tabList: [
        { label: '至尊赏', class: 'z', id: 5 },
        { label: '传说赏', class: 'c', id: 4 },
        { label: '欧皇赏', class: 'o', id: 3 },
        { label: '热门赏', class: 'h', id: 2 },
        { label: '普通赏', class: '', id: 1 },
      ],
      // 页码
      page: 1,
      // 行数
      rows: 10,
      //记录列表
      list: [],
      // 加载中
      loading: false,
      //完成 到底
      finished: false,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.getData();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 切换 区间
          case 'changeActive':
            this.changeActive(data);
            break;
          // 关闭弹窗
          case 'close':
            this.close(data);
            break;
        }
      });
    },
    // 关闭 弹窗
    close() {
      this.$emit('changeHistoryMod', false);
    },
    // 切换区间
    changeActive(ev) {
      if (this.active === ev.index) return;
      this.active = ev.index;
      this.getData();
      this.$emit('changeActive', ev);
    },

    // 获取开奖记录
    getData(ev = {}) {
      let { status = 'init' } = ev;

      if (status === 'init') {
        this.page = 1;
        this.rows = 10;
      }
      this.loading = true;
      this.$http(
        'v1.luckybagHistory',
        {
          id: this.initiallyId,
          page: this.page,
          rows: this.rows,
          weight: this.tabList[this.active].id,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          switch (status) {
            case 'init':
              this.list = res.data.list;
              break;
            case 'pull':
              this.list.push(...res.data.list);
              break;
          }
          if (res.data.list.length < this.rows) {
            this.finished = true;
          }
        }
        this.loading = false;
      });
    },

    // 监听滚动条
    onScroll() {},
    // 滚动到底
    onreachBottom() {
      if (this.finished) return;
      this.page = Number(this.page) + 1;
      this.getData({
        status: 'pull',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.lottery-history-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100074;
  width: 100%;
  height: 100vh;
}
.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
  padding: 6rpx 30rpx;

  .tab-item {
    padding: 10rpx 20rpx;
    text-align: center;
    min-width: 127rpx;
    border-radius: 6rpx;
    border: 2rpx solid rgba(184, 189, 208, 1);
    font-size: 26rpx;
    background: rgba(184, 189, 208, var(--op));
    color: rgba(184, 189, 208, 1);
    --op: 0.1;

    &.z {
      background: rgba(145, 19, 253, var(--op));
      border: 2rpx solid #9456df;
      color: #9456df;
    }
    &.c {
      background: rgba(250, 66, 36, var(--op));
      border: 2rpx solid rgba(250, 66, 36, 1);
      color: rgba(250, 66, 36, 1);
    }
    &.o {
      background: rgba(253, 138, 61, var(--op));
      border: 2rpx solid rgba(253, 138, 61, 1);
      color: rgba(253, 138, 61, 1);
    }
    &.h {
      background: rgba(19, 165, 250, var(--op));
      border: 2rpx solid rgba(21, 159, 250, 1);
      color: rgba(21, 159, 250, 1);
    }
  }
  .tab-item.active {
    --op: 1;
    font-weight: bold;
    color: #fff;
  }
}

.box-module {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 980rpx;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  animation: slide-in-bottom 1s linear 0s 1 normal none;

  .top {
    position: relative;
    display: flex;
    padding: 38rpx 30rpx 30rpx;
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 800;
      color: #000000;
    }
    .close-icon {
      position: absolute;
      top: 48rpx;
      right: 30rpx;
      width: 32rpx;
      height: 18rpx;
    }
  }

  .content {
    position: relative;
    padding: 0 30rpx 30rpx;
    padding-left: 22rpx;
    width: 100%;
    height: calc(980rpx - 250rpx);

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 4;
      width: 100%;
      height: 80rpx;
      box-shadow: 0 -27rpx 30rpx #fff inset;
    }
  }
}
</style>
